<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    *{margin:0;padding:0;}
    .box {
        height: 100px;
        width: 100px;
        background: orange;
        position: relative;
        margin: 40px;
        cursor: default;
    }

    .move {
        height: 20px;
        width:100px;
        background:#000;
        color:#fff;
        position: absolute;
        left: 0px;
        top: 0px;
        display: none;
    }
    </style>
</head>

<body>
    <div id="wrap">
        https://www.cnblogs.com/zion0707/p/3889380.html
        <div class="box">
            
        </div>
        <div class="box">

        </div>
        <div class="box">

        </div>

        <div class="move">提示1</div>

        <script type="text/javascript">
        window.onload = function() {
            var aBox = document.querySelectorAll('.box');

            var aMove = document.querySelector('.move');
            //遍历所有的box元素

            for (var i = 0; i < aBox.length; i++) {
                (function(i) {
                    aBox[i].onmousemove = function(e) {
                        //获取鼠标的当前位置
                        var disX = e.clientX + 10;
                        var disY = e.clientY + 10;

                        //定义move元素移动的位置
                        aMove.style.left = disX + 'px';
                        aMove.style.top = disY + 'px';
                    }

                    //鼠标进入的时候显示

                    aBox[i].onmouseover = function() {
                        aMove.style.display = 'block';
                    }

                    //鼠标移除的时候隐藏

                    aBox[i].onmouseout = function() {
                        aMove.style.display = 'none';
                    }

                })(i)
            }
        }
        </script>
    </div>
</body>

</html>